<template>
	<div class="home-container main-container">
		<!-- 顶部四块看板 -->
		<el-row class="info-content" :gutter="10">
			<el-col v-for="(item, index) in infoList" :span="6" :key="index" class="info-item">
				<div :style="{background: colorList[index]}">
					<p class="name">{{item.name}}</p>
					<p class="count">{{item.count}}</p>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="10">
			<el-col :span="18">
				<el-card class="box-card need-card">
					<div slot="header" class="header-clearfix fleXbox">
						<i class="el-icon-data-line"></i>
						<span>{{chartInfo.title}}</span>
						<el-select
							v-if="chartConfig.appId"
							@change="homepageTrackNumber"
							v-model="chartConfig.bizId"
							class="el_select el_selectTwo"
							size="mini"
							filterable
							clearable
							placeholder="请选择栏目"
						>
							<el-option
								v-for="item in bizList"
								:key="item.bizId"
								:label="item.bizName"
								:value="item.bizId"
							></el-option>
						</el-select>
						<el-select
							v-model="chartConfig.appId"
							@change="appChange"
							class="el_select"
							size="mini"
							filterable
							clearable
							placeholder="请选择应用"
						>
							<el-option
								v-for="item in appList"
								:key="item.appId"
								:label="item.appName"
								:value="item.appId"
							></el-option>
						</el-select>
					</div>
					<div v-loading="loadingChart" id="chart"></div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card class="box-card need-card">
					<div slot="header" class="header-clearfix fleXbox">
						<span>{{needInfo.title}}</span>
						<i class="el-icon-question icon"></i>
					</div>
					<el-row v-for="(item, index) in needInfo.data" :key="index" class="text">
						<el-col :span="2">
							<div class="num">{{index+1}}</div>
						</el-col>
						<el-col :span="18">
							<span>{{time_change(item.updateTime)}}</span>
							<span class="link-none">{{item.requirementName}}</span>
						</el-col>
						<el-col :span="4" class="status">
							<span>{{requirementStatusObj[item.status]}}</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	const colorList = ["#515A6E", "#14b6a4", "#38b0d3", "#2183da"];
	import homeApi from "@/utils/api/home.js";
	export default {
		name: "home",
		data() {
			return {
				colorList,
				infoList: [
					{
						name: "总应用数",
						count: 0
					},
					{
						name: "总栏目数",
						count: 0
					},
					{
						name: "累计埋点数",
						count: 0
					},
					{
						name: "总需求数",
						count: 0
					}
				],
				chartInfo: {
					title: "近七日数据采集",
					data: []
				},
				loadingChart: false,
				requirementStatusObj: {
					0: "设计中",
					1: "部门审核中",
					2: "实施中",
					3: "测试中",
					4: "待上线",
					5: "已上线",
					6: "大数据审核中"
				},
				appList: [], // 应用下拉框
				bizList: [], // 栏目下拉框
				chartList: [], // 图标绘制数据
				chartConfig: {
					appId: null, // 应用id
					bizId: null // 栏目id
				}, // 图表查询配置项
				needInfo: {
					title: "需求动态",
					data: []
				},
				myChart: null
			};
		},
		beforeCreate() {},
		created() {
			this.homepageTotalNumber(); // 获取累计总数
			this.homepageReqList(); // 获取动态列表
			this.homepageAppList(); // 获取应用列表
		},
		beforeMount() {},
		mounted() {
			this.homepageTrackNumber();
		},
		methods: {
			// 时间戳转换函数
			time_change(time) {
				let date = new Date(time); //获取一个时间对象
				let year = date.getFullYear(); // 获取完整的年份(4位,1970)
				let mon = date.getMonth() + 1; // 获取月份(0-11,0代表1月,用的时候记得加上1)
				mon = mon < 10 ? "0" + mon : mon;
				let day = date.getDate(); // 获取日(1-31)
				day = day < 10 ? "0" + day : day;
				return year + " - " + mon + " - " + day;
			},
			// 获取应用列表函数
			async homepageAppList() {
				let res = await homeApi.homepageAppList({
					currentPage: 1,
					pageSize: 1000
				});
				if (res&&res.success) {
					this.appList = res.value.list;
				}
			},
			// 更改应用
			appChange() {
				this.chartConfig.bizId = "";
				this.homepageBizList(); // 重新获取栏目列表
				this.homepageTrackNumber(); // 获取首页七日数据
			},
			// 获取栏目列表函数
			async homepageBizList() {
				let res = await homeApi.homepageBizList({
					appId: this.chartConfig.appId,
					currentPage: 1,
					pageSize: 1000
				});
				if (res&&res.success) {
					this.bizList = res.value.list;
				}
			},
			// 获取累计总数函数
			async homepageTotalNumber() {
				let res = await homeApi.homepageTotalNumber({});
				if (res&&res.success) {
					let arr = [
						{
							name: "总应用数",
							count: res.value.appNum ? res.value.appNum : 0
						},
						{
							name: "总栏目数",
							count: res.value.bizNum ? res.value.bizNum : 0
						},
						{
							name: "累计埋点数",
							count: res.value.trackNum ? res.value.trackNum : 0
						},
						{
							name: "总需求数",
							count: res.value.reqNum ? res.value.reqNum : 0
						}
					];
					this.infoList = arr;
				}
			},
			// 获取动态列表
			async homepageReqList() {
				let res = await homeApi.homepageReqList({
					currentPage: 1,
					pageSize: 13
				});
				if (res&&res.success) {
					let arr = res.value.homePageReqDTOList;
					this.needInfo.data = arr;
				}
			},
			// 首页查询七日数据
			async homepageTrackNumber() {
				try {
					this.myChart.clear();
				} catch (err) {
					console.log(err, "绘图初次尝试失败");
				}
				this.loadingChart = true;
				let res = await homeApi.homepageTrackNumber({
					appId: this.chartConfig.appId,
					bizId: this.chartConfig.bizId
				});
				if (res&&res.success) {
					this.loadingChart = false;
					this.chartList = res.value.homePageTrackNumberDTOList.reverse();
					this.chartInit();
				}
			},
			// 获取七日数据函数
			chartInit() {
				let chartDom = document.getElementById("chart");
				let myChart = this.$echarts.init(chartDom);

				let timeArr = []; // 时间数组
				let dataOne = []; // 埋点总数数据数组
				let dataTwo = []; // 已采集数据数组

				this.chartList.map(_i => {
					timeArr.push(this.time_change(_i.date));
					dataOne.push(_i.allTrackNum);
					dataTwo.push(_i.collectedTrackNum);
				});

				let option;

				option = {
					legend: {
						data: ["埋点总数", "已采集数"]
					},
					xAxis: {
						type: "category",
						data: timeArr
					},
					tooltip: {
						trigger: "axis",
						backgroundColor: "#001529",
						textStyle: {
							color: "#fff"
						},
						padding: [10, 10],
						extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)"
					},
					yAxis: {
						type: "value"
					},
					series: [
						{
							name: "埋点总数",
							data: dataOne,
							type: "line",
							smooth: true
						},
						{
							name: "已采集数",
							data: dataTwo,
							type: "line",
							smooth: true
						}
					]
				};

				option && myChart.setOption(option);

				this.myChart = myChart;
				this.myChart.resize();
			}
		}
	};
</script>

<style lang="scss">
	.fleXbox {
		display: flex;
		align-items: center;
	}
	.header-clearfix {
		height: 0.4rem;
		position: relative;
		.el_select {
			width: 3rem;
			font-size: 0.2rem;
			position: absolute;
			right: 0px;
		}
		.el_selectTwo {
			right: 3.2rem;
		}
		.icon {
			color: #a7aaa9;
			font-size: 18px;
			float: right;
			position: absolute;
			right: 0px;
			margin-top: 1px;
		}
	}

	.home-container {
		.info-content {
			.info-item {
				& > div {
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					height: 100%;
					padding: 15px 20px;
					color: #fff;

					/*margin-right: 10px;*/
					p {
						margin: 0;
					}
					.name {
						font-size: 16px;
						margin-bottom: 20px;
					}
					.count {
						margin-top: 45px;
						font-size: 30px;
					}
				}
				&:last-child {
					& > div {
						margin-right: 0;
					}
				}
			}
		}
		.box-card {
			margin-top: 15px;
			.el-card__header {
				padding: 12px;
				.el-icon-data-line {
					font-size: 16px;
					margin-right: 5px;
					color: #14b6a4;
				}
			}
			.el-card__body {
				height: 250px;
				padding: 0.3rem;
			}
			&.need-card {
				.el-card__body {
					height: 380px;
					.status {
						text-align: right;
					}
					#chart {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.text {
			font-size: 12px;
			margin-bottom: 5px;
			.name {
				margin-left: 5px;
			}
		}
		.num {
			width: 20px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			background-color: #e7f7ff;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
		}
	}
</style>
